<script setup>
import { getSalesman } from "@/api/visual/index.js";
import { $formatechartData, fontSize } from "@/utils/globalMethod.js";

const key = ref(1);
const salesmanData = ref([]);
const option = computed(() => {
  return {
    title: {
      text: "业务员排行",
      textStyle: {
        color: "#fff",
        fontSize: fontSize(0.16),
      },
    },

    legend: {
      itemHeight: 4,
      itemWidth: 6,
      top: 30,
      orient: "vertical",
      left: "left",
      textStyle: {
        color: "#fff",
        fontSize: fontSize(0.12),
      },
    },
    // 数据
    series: [
      {
        name: "产品类别",
        type: "pie",
        radius: "60%",
        right: "-40%",
        data: salesmanData.value,

        labelLine: {
          length: 6,
        },

        label: {
          color: "#fff",
          formatter: " {d}%",
          fontSize: fontSize(0.12),
        },
      },
    ],
  };
});

const loadData = async () => {
  const { data } = await getSalesman();
  salesmanData.value = $formatechartData(data, "PersonName", "hsje", 13);
};

onMounted(loadData);

const keyResize = () => {
  nextTick(() => {
    setTimeout(() => {
      key.value++;
    }, 100);
  });
};

onMounted(() => {
  window.addEventListener("resize", keyResize);
});

onUnmounted(() => {
  window.removeEventListener("resize", keyResize);
});
</script>

<template>
  <div class="ps_w_h_100">
    <dv-border-box13 class="ps_pd10" :key="key">
      <ps-chart2 :option="option"></ps-chart2>
    </dv-border-box13>
  </div>
</template>

<style scoped lang="scss"></style>
